<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - Bootstrap Table</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="plugins/layer/theme/default/layer.css">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <div class="ibox float-e-margins">

        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <button class="btn btn-primary " type="button" onclick="doAdd();"
                    ><i class="glyphicon glyphicon-plus"></i>&nbsp;添加
                    </button>
                    <div class="example">
                        <table id="exampleTableFromData" data-mobile-responsive="true">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Basic -->

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加用户
                </h4>
            </div>
            <div class="modal-body">
                <form method="get" class="form-horizontal">
                    <input name="id" id="id" type="hidden">
                    <input name="action" id="action" type="hidden">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" id="name" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="passWord" id="passWord" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" name="age" id="age" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" name="eMail" id="eMail" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电话号码</label>
                        <div class="col-sm-10">
                            <input type="phone" required class="form-control" id="phone" name="phone" required>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <select class="form-control m-b" name="gender" id="gender">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>

                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="$('#myModal').modal('hide')">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="doSubmit();">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="../js/content.js?v=1.0.0"></script>


<!-- Bootstrap table -->
<script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="plugins/layer/layer.js"></script>
<script>

    var html =
        '<a href="####" class="btn btn-warning" id="modUser" data-toggle="modal" data-target="#editinfo" ' +
        'style="margin-left:15px" title="修改用户">' +
        '<span class="glyphicon glyphicon-pencil"></span></a>' +
        '<a href="####" class="btn btn-danger" id="delUser" data-toggle="modal" data-target="#deleteuser" ' +
        'style="margin-left:15px" title="删除用户">' +
        '<span class="glyphicon glyphicon-trash"></span></a>'


    $(function () {
        listuserForPage();
    })


    function doSubmit() {
        $.ajax({
            url: "/user",
            data: $("form").serializeArray(),
            success: function (val) {
                if (val.code == 0) {
                    layer.msg(val.message, {
                        time: 2000,
                        icon: 1
                    });
                    $('#exampleTableFromData').bootstrapTable('refresh');
                    $('#myModal').modal('hide');
                } else {
                    layer.msg(val.message, {
                        time: 2000,
                        icon: 2
                    });
                }
            }, error: function () {
                layer.msg("操作失败", {
                    time: 2000,
                    icon: 2
                });
            }
        })
    }

    function doAdd() {
        $("form")[0].reset();
        $('#myModal').modal('show');
        $("#myModalLabel").html("添加用户")
        $("#action").val("addUser")
    }

    function updateUser(row) {
        $("form")[0].reset();
        $('#myModal').modal('show');
        $("#myModalLabel").html("修改用户")
        $("#action").val("updateUser")
        $("#id").val(row.id);
        $("#name").val(row.name);
        $("#passWord").val(row.passWord);
        $("#age").val(row.age);
        $("#eMail").val(row.eMail);
        $("#phone").val(row.phone);

    }

    function deletUserByid(row) {

        //询问框

        layer.confirm('您确定要删除改数据吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){

            $.ajax({
                type: "post",
                url: "/user",
                data: {
                    "userId": row.id,
                    "action": "deleteUserById"
                },
                success: function (val) {
                    if (val.code == 0) {
                        layer.msg(val.message, {
                            time: 2000,
                            icon: 1
                        });
                        $('#exampleTableFromData').bootstrapTable('refresh');

                    } else {
                        layer.msg(val.message, {
                            time: 2000,
                            icon: 2
                        });
                    }
                }, error: function () {
                    layer.msg("操作失败", {
                        time: 2000,
                        icon: 2
                    });
                }
            })
        }, function(){

        });

    }


    function listuserForPage() {
        $("#exampleTableFromData").bootstrapTable({
            url: "/user?action=listuserForPage",
            columns: [{
                field: 'id',
                title: '编号',
                sortable: true
            }, {
                field: 'name',
                title: '中文名',
                sortable: true
            }, {
                field: 'phone',
                title: '名称'
            }, {
                field: 'eMail',
                title: '邮箱'
            }, {
                field: 'phone',
                title: '电话',
                sortable: true
            }, {
                field: 'createTime',
                title: '创建时间',
                sortable: true
            }, {
                field: 'operate',
                title: '操作',
                formatter: html,    // 自定义方法，添加按钮组
                events: {               // 注册按钮组事件
                    'click #modUser': function (event, value, row, index) {
                        updateUser(row);
                    },
                    'click #delUser': function (event, value, row, index) {
                        deletUserByid(row)
                    }
                }
            }],
            height: "550",
            resizable: true,
            pagination: true,
            sidePagination: 'server',
            pageNumber: 1,
            pageSize: 10,
            pageList: [5, 10, 20, 50],
            search: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,

        })
    }
</script>
<!--统计代码，可删除-->

</body>

</html>
